<template>
	<div class="login_container">
		<div class="login_box">
			<!--投向区域-->
			<div class="avatar_box">
				<img src="../assets/logo.png" alt="">
			</div>
			<!--登录表单区域-->
			
			<el-form  label-width="0px" class="login_form" :model="loginform" :rules="loginformRules" ref="loginFormRef">
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input v-model="loginform.username">
						<i slot="prefix" class="iconfont iconyonghu"></i>
					</el-input>
				</el-form-item>	
				<!-- 用户名 -->
				<el-form-item prop="password">
					<el-input v-model="loginform.password" type="password">
						<i slot="prefix" class="iconfont iconmima"></i>
					</el-input>
				</el-form-item>	
				<!-- 按钮区域 -->
				<el-form-item class="btns">
					<el-button type="primary" plain @click="Login">登录</el-button>
					<el-button type="info" plain @click="resetLoginForm">重置</el-button>
				</el-form-item>	
			</el-form>
		</div>
	</div>
</template>
<script>

export default {
	data(){
		return {
			//登录表单的数据绑定对象
			loginform:{
				username:'admin',
				password:'123456'
			},
			//表单验证规则对象
			loginformRules:{
				//验证用户名是否合法
				username:[
					{required:true,message:"用户名不能为空",trigger:"blur"},
					{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				//验证密码是否合法
				password:[
					{required:true,message:"请输入登录密码",trigger:"blur"},
					{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
				]
			}
		}
	},
	methods:{
		//点击重置按钮，重置登录表单
		resetLoginForm(){
			this.$refs.loginFormRef.resetFields();
		},
		//表单登录
		Login(){
			//表单请求网络前的预校验
			this.$refs.loginFormRef.validate(async (valid)=>{
				//如果valid false 则 return
				if(!valid) return;
				// 其中data使我们需要的 我们通过解构复制 将data重命名为res
				const { data : res } = await this.$http.post('login',this.loginform)
				if(res.meta.status !== 200) return this.$message.error('登录失败')
				this.$message.success('登录成功')
				console.log(res)
			//1. 将登陆成功之后的token,保存到客户端的sessionStorage中
   			//	1. 项目中除了登录之外的其他api接口，必须在登录之后才能访问
   			//	2. token 值应在当前网站打开期间生效，所以讲token保存在sessionStorage中
   			window.sessionStorage.setItem('token',res.data.token);


			//2. 通过编程式导航跳转到后台主页，路由地址是/home
			this.$router.push('/home')
			})
		}
	}
}
</script>

<style lang="less" scoped>
.login_container{
	background-color:#2b4b6b;
	height:100%;
}
.login_box{
	width:450px;
	height:300px;
	background-color:#fff;
	border-radius:3px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);

	.avatar_box{
		height:130px;
		width:130px;
		border:1px solid #eee;
		border-radius:50%;
		padding:10px;
		box-shadow:0 0 10px #ddd;
		position:absolute;
		left:50%;
		transform:translate(-50%,-50%);
		background-color:#fff;
		img{
			width:100%;
			height:100%;
			border-radius:50%;
			background-color:#eee;
		}
	}
	.login_form{
		position:absolute;
		bottom:0;
		width:100%;
		padding:0 20px;
		box-sizing:border-box;
	}
	.btns{
		display:flex;
		justify-content:flex-end;
	}
}
</style>
